<template>
  <div id="payTemplateIndex">
    <el-row>
      <!-- 表格查询条件 -->
      <el-col :span="24">
        <el-form :inline="true" ref="stationForm" :model="queryForm">
          <el-form-item>
            <el-select filterable clearable v-model="queryForm.templateID" placeholder="所属激活模板">
              <el-option
                v-for="item in gptTemplateList"
                :key="item.templateID"
                :label="item.name"
                :value="item.templateID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="模板名称"></el-input>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="gptVipType"
                      placeholder="激活会员类型"
                      v-model="queryForm.gptVipTypeCode" />
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="timeUnit"
                      placeholder="激活时间类型"
                      v-model="queryForm.timeUnitCode" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
            <el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" @click="dialog.saveOrEditDiv=true">新增支付模板</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
              <el-button slot="reference" type="danger" icon="el-icon-delete">批量删除模板</el-button>
            </el-popconfirm>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="模板名称"></el-table-column>
              <el-table-column prop="gptVipTypeName" label="激活会员类型">
                <template slot-scope="scope">
                  <el-tag :type="getTagType(scope.row.gptVipTypeCode)">{{ scope.row.gptVipTypeName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="timeUnitName" label="激活周期类型">
                <template slot-scope="scope">
                  <el-tag :type="getTagType(scope.row.timeUnitCode)">{{ scope.row.timeUnitName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="vipDayLmit" label="实际激活天数"></el-table-column>
              <el-table-column prop="price" label="定价">
                <template slot-scope="scope">
                  <span style="color:red;font-weight: bold">¥{{ scope.row.price }}</span>&nbsp;
                  <span style="color:gray;">原价：</span>
                  <span v-if="scope.row.oldPrice!=null&&scope.row.oldPrice!=0" style="color:gray;text-decoration: line-through">¥{{ scope.row.oldPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
                  <el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 新增\修改用户信息弹窗 -->
    <el-dialog
      :title="(dialog.isEdit == true ? '编辑' : '新增') + '支付模板'"
      :visible.sync="dialog.saveOrEditDiv"
      :close-on-click-modal="false"
      :show-close="false"
      width="70%"
      :destroy-on-close="true"
    >
      <el-tabs v-model="tabSelect">
        <el-tab-pane label="1.模板信息" name="1"></el-tab-pane>
        <el-tab-pane label="2.详细介绍" name="2"></el-tab-pane>
      </el-tabs>
      <el-form v-show="tabSelect==1"
        ref="saveOrEditDataForm"
        :rules="saveOrEditDataFormRules"
        :model="saveOrEditData"
        label-width="110px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="name">
              <el-input
                v-model="saveOrEditData.name"
                placeholder="请填写模板名称"
                maxlength="80"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="激活模板" prop="templateID">
              <el-select style="width: 100%" filterable clearable v-model="saveOrEditData.templateID" placeholder="请选择所属激活模板">
                <el-option
                  v-for="item in gptTemplateList"
                  :key="item.templateID"
                  :label="item.name"
                  :value="item.templateID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="激活会员类型" prop="gptVipTypeCode">
              <gd_param type="select"
                        paramCode="gptVipType"
                        placeholder="请选激活会员类型"
                        @selectChange="gptVipTypeChange"
                        v-model="saveOrEditData.gptVipTypeCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="激活时间类型" prop="timeUnitCode">
              <gd_param type="select"
                        paramCode="timeUnit"
                        placeholder="请选激活时间类型"
                        @selectChange="timeUnitChange"
                        v-model="saveOrEditData.timeUnitCode" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="激活时间" prop="vipDayLmit">
              <el-input
                type="number"
                v-model="saveOrEditData.vipDayLmit"
                placeholder="请输入激活时间"
                maxlength="10"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板排序号" prop="mindex">
              <el-input
                type="number"
                v-model="saveOrEditData.mindex"
                placeholder="请填写模板排序号"
                maxlength="80"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品定价" prop="price">
              <el-input
                type="number"
                v-model="saveOrEditData.price"
                placeholder="请填写产品定价"
                maxlength="10"
                show-word-limit
              >
                <template slot="append">元 / 人民币</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品原价" prop="oldPrice">
              <el-input
                type="number"
                v-model="saveOrEditData.oldPrice"
                placeholder="可填写原价，用于营销"
                maxlength="10"
                show-word-limit
              >
                <template slot="append">元 / 人民币</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="淘宝链接" prop="taobaoUrl">
              <el-input
                v-model="saveOrEditData.taobaoUrl"
                placeholder="请填写淘宝链接"
                maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否使用淘宝链接支付" prop="isUseTaoBao">
              <gd_param type="select"
                        paramCode="isOrNot"
                        placeholder="是否使用淘宝链接支付"
                        v-model="saveOrEditData.isUseTaoBao" />

            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="comment">
          <el-input
            type="textarea"
            placeholder="如有备注请输入描述"
            v-model="saveOrEditData.comment"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <el-row v-show="tabSelect==2">
        <gd_wordeditor :value="saveOrEditData.payDesc" @change="payDescChange"/>
      </el-row>

      <!-- 按钮组 -->
      <div style="margin-top: 10px">
        <el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">确定</el-button>
        <el-button
          @click="
							dialog.saveOrEditDiv = false;
              dialog.isEdit = false;
							resetAddOrEditOrShowForm();
						"
        >
          取消
        </el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      title="支付模板详情"
      :visible.sync="dialog.showDiv"
      width="85%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="tabSelect">
        <el-tab-pane label="1.模板信息" name="1"></el-tab-pane>
        <el-tab-pane label="2.详细介绍" name="2"></el-tab-pane>
      </el-tabs>
      <el-descriptions v-show="tabSelect==1" class="margin-top" :column="2" border>
        <el-descriptions-item label="名称">{{ showData.name }}</el-descriptions-item>
        <el-descriptions-item label="会员等级类型">{{ showData.gptVipTypeName }}</el-descriptions-item>
        <el-descriptions-item label="激活时间类型">{{ showData.timeUnitName }}</el-descriptions-item>
        <el-descriptions-item label="激活天数">{{ showData.vipDayLmit }}</el-descriptions-item>
        <el-descriptions-item label="现价">{{ showData.price }}</el-descriptions-item>
        <el-descriptions-item label="原价">{{ showData.oldPrice }}</el-descriptions-item>
        <el-descriptions-item label="排序号">{{ showData.mindex }}</el-descriptions-item>
        <el-descriptions-item label="是否使用淘宝链接支付">{{ showData.isUseTaoBao==1?"是":"否" }}</el-descriptions-item>
        <el-descriptions-item label="淘宝链接" span="2">{{ showData.taobaoUrl }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ showData.comment }}</el-descriptions-item>
      </el-descriptions>

      <el-row v-show="tabSelect==2" v-html="showData.payDesc"></el-row>

      <el-button
        @click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
      >
        关闭
      </el-button>
    </el-dialog>



  </div>
</template>

<script>
import * as axiosAPI from '@/api/gpt/paytemplate.js';
import * as templateAxiosAPI from '@/api/gpt/modetemplate.js';
import gd_param from "@/components/mycomponents/gd_param.vue";
import gd_file from "@/components/mycomponents/gd_file.vue";
import gd_wordeditor from '@/components/mycomponents/gd_wordeditor';

export default {
  name: 'payTemplateIndex',
  components:{gd_file, gd_param, gd_wordeditor},
  data() {
    return {
      tabSelect:"1",
      //查询表单数据
      queryForm: {
        templateID: null,
        name: null,
        gptVipTypeCode: null,
        timeUnitCode: null
      },
      //表格数据
      tableData: [],
      //当前表格复选数据
      nowTableSelected: [],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false
      },
      //添加编辑表单-检验
      saveOrEditDataFormRules:{
        templateID: { required: true, message: '请选择对应激活模板', trigger: 'change' },
        name: { required: true, message: '请输入模板名称', trigger: 'blur' },
        gptVipTypeCode: { required: true, message: '请选择激活会员类型', trigger: 'change' },
        timeUnitCode: { required: true, message: '请选择激活周期', trigger: 'change' },
        vipDayLmit: { required: true, message: '请输入会员激活时间（天数）', trigger: 'blur' },
        price: { required: true, message: '请输入价格', trigger: 'blur' },
        payDesc: { required: true, message: '请输入详情描述', trigger: 'blur' },
        mindex: { required: true, message: '请输入排序号', trigger: 'blur' }
      },
      saveOrEditData:{
        payTemplateID:null,
        comment:null,
        templateID:null,
        name:null,
        gptVipTypeCode:null,
        gptVipTypeName:null,
        timeUnitCode:null,
        timeUnitName:null,
        vipDayLmit:null,
        price:null,
        oldPrice:null,
        payDesc:null,
        mindex:0,
        taobaoUrl:null,
        isUseTaoBao:"0"
      },
      //展示表单数据
      showData: {
        payTemplateID:null,
        comment:null,
        templateID:null,
        name:null,
        gptVipTypeCode:null,
        gptVipTypeName:null,
        timeUnitCode:null,
        timeUnitName:null,
        vipDayLmit:null,
        price:null,
        oldPrice:null,
        payDesc:null,
        mindex:0,
        taobaoUrl:null,
        isUseTaoBao:"0"
      },
      //表单加载值
      formLoading: false,
      // 激活模板数据
      gptTemplateList:[]
    };
  },
  mounted() {
    this.getGptTemplateList();
    this.getTableDatas();
  },
  filters:{
    timeFormat:function(value){
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1 +'';
      let day = date.getDate() +'';
      let hour = date.getHours() +'';
      let minute = date.getMinutes() +'';
      let second = date.getSeconds() +'';
      return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}`
    }
  },
  computed:{
    getTagType(){
      return(data) =>{
        if(data == "1"){
          return "info";
        }else if(data == "2"){
          return "success";
        }else if(data == "3"){
          return "warning";
        }else if(data == "4"){
          return "warning";
        }else{
          return "ppp";
        }
      }
    }
  },
  methods: {
    // 获取激活模板数据
    getGptTemplateList(){
      let _this = this;
      templateAxiosAPI.list()
        .then(function(res){
          if(res.code == "0000"){
            _this.gptTemplateList = res.data;
          }
        });
    },
    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.list(_this.queryForm)
        .then(function(response) {
          console.log(response);
          if (response.code == '0000') {
            _this.tableData = response.data;
          }
        });
    },
    //重置查询条件表单
    resetQueryForm() {
      this.queryForm = {
        templateID: null,
        name: null,
        gptVipTypeCode: null,
        timeUnitCode: null
      };
      this.getTableDatas();
    },
    //重置添加、编辑、展示表单
    resetAddOrEditOrShowForm() {
      this.showData = {
        payTemplateID:null,
        comment:null,
        templateID:null,
        name:null,
        gptVipTypeCode:null,
        gptVipTypeName:null,
        timeUnitCode:null,
        timeUnitName:null,
        vipDayLmit:null,
        price:null,
        oldPrice:null,
        payDesc:null,
        mindex:0,
        taobaoUrl:null,
        isUseTaoBao:"0"
      };
      this.saveOrEditData = {
        payTemplateID:null,
        comment:null,
        templateID:null,
        name:null,
        gptVipTypeCode:null,
        gptVipTypeName:null,
        timeUnitCode:null,
        timeUnitName:null,
        vipDayLmit:null,
        price:null,
        oldPrice:null,
        payDesc:null,
        mindex:0,
        taobaoUrl:null,
        isUseTaoBao:"0"
      }
    },
    //提交-添加、编辑表单
    submitSaveOrEdit() {
      let _this = this;
      this.$refs.saveOrEditDataForm.validate(valid => {
        if (valid) {
          this.formLoading = true;
          let _this = this;
          if(_this.dialog.isEdit == true){// 编辑

            axiosAPI.update(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.dialog.isEdit = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });

          }else{ // 添加
            axiosAPI.add(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.dialog.isEdit = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });
          }
        }
      });
    },
    //提交-删除
    submitDelete(ids){
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //行-查看
    rowShow(data) {
      var _this = this;
      axiosAPI.getByID(data.payTemplateID)
        .then(function(res){
          if(res.code == "0000"){
            _this.showData = res.data;
            _this.dialog.showDiv = true;
          }
        });
    },
    //行-编辑
    rowEdit(data) {

      let _this = this;
      axiosAPI.getByID(data.payTemplateID)
        .then(function(res){
          if(res.code == "0000"){
            _this.saveOrEditData = res.data;
            _this.dialog.isEdit = true;
            _this.dialog.saveOrEditDiv = true;
          }
        });
    },
    //行-删除
    rowDelete(data) {
      this.$confirm('确定要删除这行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.payTemplateID);
      });
    },
    //点击批量删除
    moreDeletes() {
      if(this.nowTableSelected.length<=0){
        this.$notify.warning({
          title: '删除提示',
          message: '请至少选择一条数据再删除'
        });
        return;
      }
      let ids = '';

      for (var i in this.nowTableSelected) {
        ids += this.nowTableSelected[i].payTemplateID + ',';
      }

      ids = ids.substring(0, ids.length - 1);

      //调用删除
      this.submitDelete(ids);
    },
    //表格批量选择
    tableDataSelected(data){
      this.nowTableSelected = data;
    },
    // 会员类型选择
    gptVipTypeChange(data){
      if(data == undefined){
        this.saveOrEditData.gptVipTypeCode = null;
        this.saveOrEditData.gptVipTypeName = null;
      }else{
        this.saveOrEditData.gptVipTypeCode = data.dataValue;
        this.saveOrEditData.gptVipTypeName = data.dataName;
      }
    },
    // 时间单位选择选择
    timeUnitChange(data){
      if(data == undefined){
        this.saveOrEditData.timeUnitCode = null;
        this.saveOrEditData.timeUnitName = null;
        this.saveOrEditData.vipDayLmit = null;
      }else{
        this.saveOrEditData.timeUnitCode = data.dataValue;
        this.saveOrEditData.timeUnitName = data.dataName;

        if(data.dataValue == 1){
          this.saveOrEditData.vipDayLmit = 9999;
        }else if(data.dataValue == 2){
          this.saveOrEditData.vipDayLmit = 365;
        }else if(data.dataValue == 3){
          this.saveOrEditData.vipDayLmit = 93;
        }else if(data.dataValue == 4){
          this.saveOrEditData.vipDayLmit = 31;
        }else if(data.dataValue == 5){
          this.saveOrEditData.vipDayLmit = 7;
        }else if(data.dataValue == 6){
          this.saveOrEditData.vipDayLmit = 1;
        }
      }
    },
    // 详细内容编写修改
    payDescChange(data){
      this.saveOrEditData.payDesc = data;
    }

  }
};
</script>

<style scoped></style>
